<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <div class="nav">
        <img src="img/login.jpg" alt="">
        <span class="title">我的博客系统</span>
    <!-- 此处的spacer只是用来占位，把后面的东西撑到右边去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">博客编辑页</a>
        <a href="logout">注销</a>
    </div>

   <!-- 左右排列的，就需要弹性布局 -->
   <!-- 页面的版心 -->
    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="img/ms.jpg" alt="">
                <h3></h3>
                <a href="#">gitub地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>

        </div>
        <div class="container-right">
            <!-- 每个blog就是一篇博客 -->
            <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11.06 12:00:00</div>
                <div class="desc">
                    从今天起，我要好好学习，天天向上
                </div>
                <a href="blog_detail.html">查看全文&gt;&gt; </a>
            </div> -->

        </div>
    </div>

    <!-- 引用jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/getLoginStatus.js"></script>
    <script>
        //发送ajax从服务器获取请求
        function getBlogs(){
            $.ajax({
                type:'get',
                url:'blog',
                // 据后端，此时的body是js对象数组，每个元素就是一个博客 
                success:function(body){

                    let container=document.querySelector('.container-right');
                    for(let blog of body){
                        //构造blogDiv
                        let blogDiv=document.createElement('div');
                        blogDiv.className='blog';

                        //构造博客标题
                        let titleDiv=document.createElement('div');
                        titleDiv.className='title';
                        titleDiv.innerHTML=blog.title;


                        // 构造博客日期
                        let dateDiv=document.createElement('div');
                        dateDiv.className='date';
                        dateDiv.innerHTML=blog.postTime;

                        // 构造博客的摘要
                        let descDiv=document.createElement('div');
                        descDiv.className='desc';
                        descDiv.innerHTML=blog.content;

                        //构造查看全文按钮
                        let a=document.createElement('a');
                        a.href='blog_detail.html?blogId='+blog.blogId;
                        a.innerHTML='查看全文 &gt;&gt;';

                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);

                        container.appendChild(blogDiv);
                                   
                    }
                
                }

                // //  404  403 或者 500 才会执行这里的error
                // , error:function(){
                //     console.log("用户未登录");

                //     location.assign("login.html");

                // }
                // //可以多发一个ajax请求来查看登录状态，别的页面也可以用到，上面的error就可以不写
            
            });

        }

        getBlogs();


        // //可以多发一个ajax请求来查看登录状态，别的页面也可以用到
        // //前端 判断后端返回的状态码是200 还是403 404 500等，是200就无事发生，不是就跳转会登录页
        // function getLoginStatus(){
        //     $.ajax({
        //         type:'get',
        //         url:'login',
        //         success:function(){
        //             console.log("当前已登录");
        //         },
        //         error:function(){
        //             console.log("当前还未登录");
        //             location.assign("login.html");
        //         }

        //     });
        // }
        // //别的页面也用，干脆写到一个地方去      
        getLoginStatus();

        //针对博客列表页，获取到当前用户的登录信息
        function getUserInfo(){
            $.ajax({
                type:'get',
                url:"userInfo",
                success:function(body){
                    //获取成功，一个body就是一个 User 对象
                    //把user对象里的内容写到页面即可
                    let h3=document.querySelector('.container-left .card h3');
                    h3.innerHTML=body.username;

                }
            });
        }

        getUserInfo();
        
    </script>

    
   
    
</body>
</html>